<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/softReset.css">
    <title>科学技术人物奖推荐书-Word文档</title>
    <style>
        #app {
            padding-bottom: 50px;
        }
        .page {
            page-break-after: always;
            page-break-inside: avoid;
        }
        @media print {
            @page {
                margin: 2cm 0;
            }
        }
        .publish_page {
            position: relative;
            width: 600px;
            margin: 0 auto;
            /* min-height: 790px; */
            padding-top: 190px;
            padding-bottom: 30px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
        }
        .publish_title {
            width: 100%;
            text-align: center;
            font-size: 32px;
            line-height: 62px;
            height: 62px;
            font-family: "宋体";
            font-weight: bold;
            letter-spacing: 2px;
        }
        .input_form {
            box-sizing: border-box;
            margin: 230px auto 30px;
        }
        .input_info {
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
            height: 50px;
            margin-bottom: 30px;
        }
        .input_label {
            width: 120px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            font-size: 18px;
            text-align: center;
            font-family: STSong;
            font-weight: 700;
        }
        .text_input {
            width: 100%;
            min-width: 300px;
            height: 50px;
            box-sizing: border-box;
            border-bottom: 1px solid #000;
            padding: 5px;
            text-align: center;
            display: flex;
            font-size: 18px;
            justify-content: center;
            align-items: flex-end;
            font-family: STSong;
            font-weight: 700;
        }
        .publish_company {
            text-align: center;
            font-size: 18px;
            width: 100%;
            font-family: STSong;
            font-weight: 700;
        }
        table {
            border-collapse:collapse;
            font-family: SimSun;
        }
        td {
            padding: 5px;
            box-sizing: border-box;
            white-space:normal;
            word-break:break-all;
            word-wrap:break-word;
            font-size: 14px;
        }
        th {
            font-weight: 500;
            padding: 5px;
        }
        .label_td {
            text-align: center;
            letter-spacing: 1px;
        }
        .module_title {
            text-align: center;
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            color: #000;
            font-weight: 600;
            font-family: SimSun;
            font-weight: 700;
        }
        .module_desc {
            width: 604px;
            text-align: left;
            box-sizing: border-box;
            margin: 0 auto;
            font-size: 16px;
            margin-bottom: 20px;
            font-family: SimSun;
        }
        .module_content {
            width: 604px;
            box-sizing: border-box;
            border: 1px solid #000;
            margin: 0 auto;
            font-size: 14px;
            border-top: none;
            font-family: SimSun;
        }
        .files_content {
            width: 604px;
            box-sizing: border-box;
            margin: 0 auto;
        }
        .files_content > p {
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            font-family: SimSun;
        }
        .basic_table {
            width: 100%;
            box-sizing: border-box;
            width: 604px;
            margin: 0 auto;
            font-size: 14px;
        }
        .left_basic_short_info {
            width: calc(100% - 161px);
            box-sizing: border-box;
        }
        .right_basic_head_img {
            width: 161px;
            height: 180px;
            box-sizing: border-box;
        }
        .right_basic_head_img img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
        .textarea_info {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            border-bottom: 1px solid #1a1a1a;
        }

        .textarea_label {
            width: 27px;
            box-sizing: border-box;
            writing-mode: vertical-lr;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
        }
        .table_first {
            /* height: 206px; */
            width: 604px;
            margin: 0 auto;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-left: 1px solid #1a1a1a;
            border-bottom: 1px solid #1a1a1a;

        }
        .table_first > table {
            width: calc(100% - 27px);
            border-bottom: none;
            border-top: none;
        }
        .table_first>table tr {
            border-bottom: 1px solid #1a1a1a;
        }
        .table_first>table tr:last-child {
            border-bottom: none;
        }
        .textarea_content {
            width: calc(100% - 27px);
            box-sizing: border-box;
            border-left: 1px solid #1a1a1a;
            padding: 5px;
        }
        .fill_table_content {
            width: 673px;
            box-sizing: border-box;
            border: 1px solid #000;
            margin: 0 auto;
        }
        .fill_table_content td {
            text-align: center;
        }



        .paper_info {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            border-bottom: 1px solid #1a1a1a;
        }
        .paper_left {
            width: 47px;
            box-sizing: border-box;
            border-right: 1px solid #1a1a1a;
            text-align: center;
            height: 57px;
            line-height: 57px;
        }
        .paper_center {
            width: 246px;
            box-sizing: border-box;
            border-right: 1px solid #1a1a1a;
            text-align: center;
            height: 57px;
            line-height: 57px;
            text-align: center;
        }
        .paper_right {
            width: 309px;
            box-sizing: border-box;
            text-align: center;
            height: 57px;
            text-align: center;
        }
        .paper_head{
            height: 31px;
            line-height: 31px;
        }
        .paper_content {
            width: 673px;
            box-sizing: border-box;
            margin: 0 auto;
            table-layout: fixed;
        }
        .paper_content td {
            text-align: center;
        }


        .knowledge_table {
            width: 673px;
            box-sizing: border-box;
            margin: 0 auto;
            table-layout: fixed;
        }
        .knowledge_table th {
            text-align: center;
        }
        .knowledge_table td {
            text-align: center;
            word-wrap: break-word;
        }
        .knowledge_table tr {
            min-height: 58px;
        }



        .science_table {
            width: 673px;
            box-sizing: border-box;
            margin: 0 auto;
            table-layout: fixed;
        }
        .science_table td {
            text-align: center;
        }

        .project_table {
            width: 673px;
            box-sizing: border-box;
            margin: 0 auto;
            table-layout: fixed;
        }

        .project_table td {
            text-align: center;
        }


        .module_textarea {
            width: 673px;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #1a1a1a;
            margin: 0 auto;
            font-family: SimSun;
        }
        .barcode{
            position: absolute;
            right:0;
            top:10px;
            height:100px;
            width:250px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            margin-bottom: 30px;
        }
        .barcode img{
            width:210px;
            height:50px;
        }
        .barcode-text{
            display: flex;
            width:210px;
            justify-content: center;
            letter-spacing: 2px;
        }
    </style>
</head>

<body>
<div id="app" v-cloak>
    <div class="publish_page page">
        <div class="barcode">
            <img src="data:image/png; base64, {{ $barcodeImg }}"/>
            <div class="barcode-text">{{$barcode}}</div>
        </div>
        <div class="title_header">
            <h1 class="publish_title">中国公路建设行业协会科学技术奖</h1>
            <h1 class="publish_title">科学技术进步奖申报书</h1>
        </div>

        <table class="input_form">
            <tr class="input_info">
                <td class="input_label">人选姓名</td>
                <td class="text_input">@{{talentConfig.basic.name}}</td>
            </tr>
            <tr class="input_info">
                <td class="input_label">工作单位</td>
                <td class="text_input">@{{talentConfig.basic.company}}</td>
            </tr>
            <tr class="input_info">
                <td class="input_label">推荐单位</td>
                <td class="text_input">测试用推荐单位</td>
            </tr>
        </table>

        <div class="publish_company">
            中国公路建设行业科学技术奖办公室制
        </div>
    </div>

    <div class="page">
        <div class="module_title">
            一、基本情况
        </div>
        <table class="basic_table" border="1px solid #1a1a1a">
            <tr>
                <td width="116px" class="label_td">姓名</td>
                <td>@{{talentConfig.basic.name}}</td>
                <td width="48px" class="label_td">性别</td>
                <td>@{{talentConfig.basic.sex == 1 ? "男" : "女"}}</td>
                <td width="48px" class="label_td">民族</td>
                <td>@{{talentConfig.basic.nation}}</td>
                <td class="right_basic_head_img" rowspan="6" width="161px"><img
                            :src="talentConfig.basic.document_photo" alt=""></td>
            </tr>
            <tr>
                <td class="label_td">学历</td>
                <td>@{{talentConfig.basic.eduction}}</td>
                <td class="label_td">学位</td>
                <td>@{{talentConfig.basic.degree}}</td>
                <td class="label_td">党派</td>
                <td>@{{talentConfig.basic.groups}}</td>
            </tr>
            <tr>
                <td class="label_td">出生日期</td>
                <td colspan="2">@{{talentConfig.basic.birth}}</td>
                <td class="label_td">行政职务</td>
                <td colspan="2">@{{talentConfig.basic.duty}}</td>
            </tr>
            <tr>
                <td class="label_td">专业技术职务</td>
                <td colspan="2">@{{talentConfig.basic.professional}}</td>
                <td class="label_td">手机号码</td>
                <td colspan="2">@{{talentConfig.basic.phone}}</td>
            </tr>
            <tr>
                <td class="label_td">毕业时间</td>
                <td colspan="2">@{{talentConfig.basic.graduate}}</td>
                <td class="label_td">单位电话</td>
                <td colspan="2">@{{talentConfig.basic.company_phone}}</td>
            </tr>
            <tr>
                <td class="label_td">E-mail</td>
                <td colspan="2">@{{talentConfig.basic.mail}}</td>
                <td class="label_td">住宅电话</td>
                <td colspan="2">@{{talentConfig.basic.house_phone}}</td>
            </tr>
            <tr>
                <td class="label_td">工作单位及全称</td>
                <td colspan="6">@{{talentConfig.basic.company}}</td>
            </tr>
            <tr>
                <td class="label_td">单位地址及邮编</td>
                <td colspan="5">@{{talentConfig.basic.company_address}}</td>
                <td>@{{talentConfig.basic.company_email}}</td>
            </tr>
            <tr>
                <td class="label_td">家庭地址及邮编</td>
                <td colspan="5">@{{talentConfig.basic.house_address}}</td>
                <td>@{{talentConfig.basic.house_email}}</td>
            </tr>
        </table>
        <div class="module_content" style="border-bottom: none">

            <div class="textarea_info small">
                <div class="textarea_label">社会职务</div>
                <div class="textarea_content"
                     v-html="talentConfig.basic.job.replace(/\r?\n/g, '<br />')">
                </div>
            </div>

            <div class="textarea_info big" style="min-height: 164px">
                <div class="textarea_label">国内外学术组织任职情况</div>
                <div class="textarea_content" style="min-height: 164px" v-html="talentConfig.basic.situation.replace(/\r?\n/g, '<br />')">
                </div>
            </div>
        </div>
        <div class="table_first" style="min-height: 56px">
            <div class="textarea_label" style="font-family: SimSun;">本人简历</div>
            <table border="1" class="textarea_content" style="min-height: 56px" cellspacing="0" cellpadding="0">
                <tr v-for="(info,index) in talentConfig.basic.resume" :key="index">
                    <td>
                        @{{info.range}}
                    </td>
                    <td>
                        @{{info.address}}担任@{{info.experience}}
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="page">
        <div class="module_title">
            二、 所获科技奖励和荣誉称号情况
        </div>
        <div class="module_desc">
            (限市级及以上人民政府或全国性行业协会授予的奖励或荣誉)
        </div>
        <table class="fill_table_content" cellspacing="0" cellpadding="0" border="1">
            <thead>
            <tr>
                <th width="208px">奖励或荣誉名称</th>
                <th>授奖单位</th>
                <th width="83px">授权日期</th>
                <th width="96px">获奖总人数</th>
                <th width="82px">本人排名</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in talentConfig.award" :key="index">
                <td>@{{item.award_name}}</td>
                <td>@{{item.company_of_issue}}</td>
                <td>@{{item.date}}</td>
                <td>@{{item.total}}</td>
                <td>@{{item.rank}}</td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="page">
        <div class="module_title">
            三、发表论文和专著情况
        </div>
        <table class="paper_content" cellspacing="0" cellpadding="0" border="1">
            <thead>
            <tr>
                <th width="47px">序号</th>
                <th width="246px">基本信息</th>
                <th>本人作用和主要贡献(限100字)</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(res,index) in talentConfig.paper">
                <td>@{{index + 1}}</td>
                <td>名称：@{{res.paper_name}}，年份：@{{res.date}}，本人排名：@{{res.rank}}，合作者：@{{res.partner}}，出版社(发表刊物)：@{{res.publish}}</td>
                <td>@{{res.contribution}}</td>
            </tr>
            </tbody>
        </table>
        <div class="module_desc">
            (限填有代表性的论文和著作十篇（册）以内。请在“基本信息”栏内按顺序填写论文/著作名称，年份，本人排名，主要合作者，发表刊物或出版社名称)
        </div>
    </div>

    <div class="page">
        <div class="module_title">
            四、所获知识产权证书
        </div>
        <div class="module_desc">
            (限十项以内)
        </div>
        <table class="knowledge_table" cellspacing="0" cellpadding="0" border="1">
            <thead>
            <tr>
                <th width="32px">序号</th>
                <th width="56px">知识产权类别</th>
                <th width="82px">授权项目名称</th>
                <th>国别(区)</th>
                <th width="48px">授权号</th>
                <th width="42px">授权日期</th>
                <th width="58px">证书编号</th>
                <th>权利人</th>
                <th width="49px">发明人</th>
                <th width="49px">所对应标志性成果</th>
                <th>证明材料编号</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(result,num) in talentConfig.property" :key="num">
                <td>@{{num + 1}}</td>
                <td>@{{result.property_category}}</td>
                <td>@{{result.item_name}}</td>
                <td>@{{result.country}}</td>
                <td>@{{result.authorization_num}}</td>
                <td>@{{result.authorization_date}}</td>
                <td>@{{result.certificate_number}}</td>
                <td>@{{result.obligee}}</td>
                <td>@{{result.inventor}}</td>
                <td>@{{result.achievement}}</td>
                <td>@{{result.reference_number}}</td>
            </tr>
            </tbody>
        </table>
    </div>


    <div class="page">
        <div class="module_title">
            五、承担科研项目情况
        </div>
        <table class="science_table" cellspacing="0" cellpadding="0" border="1">
            <thead>
            <tr>
                <th width="38px">序号</th>
                <th width="100px">项目名称</th>
                <th width="40px">研发经费(万元)</th>
                <th width="47px">项目来源</th>
                <th width="47px">项目编号</th>
                <th width="77px">研发起止时间</th>
                <th width="68px">状态(在研/已验收)</th>
                <th width="73px">负责人</th>
                <th width="40px">本人在项目成果中排序</th>
                <th>证明材料编号</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in talentConfig.scientific" :key="index">
                <td>@{{index + 1}}</td>
                <td>@{{item.project_name}}</td>
                <td>@{{item.expenditure}}</td>
                <td>@{{item.project_origin}}</td>
                <td>@{{item.project_number}}</td>
                <td>@{{item.development_date}}</td>
                <td>@{{item.status}}</td>
                <td>@{{item.principal}}</td>
                <td>@{{item.sort}}</td>
                <td>@{{item.reference_number}}</td>
            </tr>
            </tbody>
        </table>
    </div>


    <div class="page">
        <div class="module_title">
            六、参与重大工程技术项目情况
        </div>
        <table class="project_table" cellspacing="0" cellpadding="0" border="1">
            <thead>
            <tr>
                <th>项目名称</th>
                <th>项目委托单位</th>
                <th>本人参与情况</th>
                <th>经济效益(万元)</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(res,index) in talentConfig.engineering" :key="index">
                <td>@{{res.project_name}}</td>
                <td>@{{res.issue_company}}</td>
                <td>@{{res.aboutme}}</td>
                <td>@{{res.economic}}</td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="page">
        <div class="module_title">
            七、 科技成果转化及推广情况
        </div>
        <div class="module_textarea"
             v-html="talentConfig.situation.replace(/\r?\n/g, '<br />')">
        </div>
    </div>


    <div class="page">
        <div class="module_title">
            八、 附件
        </div>
        <div class="files_content">
            <p>1.科技奖励和荣誉称号证书或文件</p>
            <p>2.代表性论文、专著（不超过5篇）</p>
            <p>3.所获知识产权证书</p>
            <p>4.承担科研项目立项或验收文件</p>
            <p>5.效益证明</p>
            <p>6.推广应用证明</p>
            <p>7.其他证明</p>
        </div>
    </div>
</div>
</body>

</html>
<script src="/libs/vue/vue.js"></script>

<script>
    let talentConfig = {!! json_encode($formData, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!};

    let app = new Vue({
        el:'#app',
        data:{
            talentConfig
        },
        mounted () {
            // console.log(talentConfig);
        }
    })
</script>